<template>
  <div>
    <div class="aside-title">
      {{typeName}}
    </div>
    <el-tree class="filter-tree" :data="data" node-key="id" :props="type==='role'?roleProps:type==='userGroup'?userGroupProps:type==='porject'?projectProps:defaultProps"
      :expand-on-click-node="false" default-expand-all :filter-node-method="filterNode" @node-click="chosen" :highlight-current="true"
      ref="tree">
    </el-tree>
  </div>
</template>
<script>
  export default {
    props: {
      typeName: {
        type: String
      },
      data: {
        type: Array
      },
      type: {
        type: String
      },
      default: {
        type: Number
      }
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      chosen(val) {
        this.$emit("childtofather", val);
      }
    },
    data() {
      return {
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'deptName'
        },
        roleProps: {
          label: 'roleName',
        },
        userGroupProps: {
          label: 'userGroupName',
        },
        projectProps: {
          label: 'name',
        }
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.default);
      });
    },
    watch: {
      data(newval) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.tree.setCurrentKey(this.default);
          })
        });
      },
      default (newval) {
        if (this.type === 'user') {
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.default);
          });
        }
      }
    }
  };

</script>

